<template>
  <a-tooltip class="d-tooltip" placement="topLeft" :visible="show" trigger="click">
    <template #title>{{content}}</template>
    <div class="d-tooltip-anchor" :style="anchorStyle"/>
  </a-tooltip>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: "d-tooltip",
  props:{
    content:{
      type: String,
      default: '',
    },
    position:{
      type: Array,
      default(){return [0,0]}
    },
    visible:{
      type: Boolean,
      default: false,
    },
  },
  computed:{
    show:{
      get(){return this.visible},
      set(val){
        this.$emit("update:visible",val)
      }
    },
    anchorStyle(){
      const [left, bottom] = this.position;
      return `left: ${left}px;bottom: ${bottom}px`
    }
  },
  methods:{
  }
});
</script>

<style lang="less">
.d-tooltip {
}
.d-tooltip-anchor{
  position: absolute;
  width: 2px;
  height: 2px;
}
</style>
